<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <button id="btn">测试</button>
    <br>
    <input type="text" name="msg1"><br>
    <input type="text" name="msg2"><br>
  </div>
  <!-- 
    1.作为一般函数调用:$(param)
      1).参数为函数：当DOM加载完成后，执行此回调函数
      2).参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象
      3).参数为DOM对象：将DOM对象封装成jQuery对象
      4).参数为html标签字符串（用得少）：创建标签对象并封装成jQuery对象
    
    2.作为对象使用: $.xxx()
      1).$.each()：隐式遍历数组
      2).$.trim()：去除两端的空格
   -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <script>
    /*
      需求1 点击按钮：显示按钮的文本，增加一个新的输入框
      需求2 遍历输出数组中所有元素值
      需求3 去掉 my jQuery 两端的空格
    */
    // 需求1 点击按钮：显示按钮的文本，增加一个新的输入框
    // 1).参数为函数：当DOM加载完成后，执行此回调函数
    $(function () { //绑定文档加载完成的监听
      // 2).参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象
      // 获取到id为btn的按钮
      $('#btn').click(function () {//绑定点击事件监听
        // this是什么？ 发生事件的dom元素对象 当前就是button按钮
        // 原生JS获取元素内容
        // alert(this.innerHTML)
        // 3).参数为DOM对象：将DOM对象封装成jQuery对象
        // jQuery获取元素内容 我们要将this也变为jQuery对象
        alert($(this).html())

        // 4).参数为html标签字符串（用得少）：创建标签对象并封装成jQuery对象
        // 查看文档chm 使用appendTo
        $('<input type = "text" name = "msg3" > <br>').appendTo('div')
      })
    })

    // 需求2 遍历输出数组中所有元素值
    var arr = [1, 2, 3, 4]
    // 1).$.each() ：隐式遍历数组
    $.each(arr, function (index, item) {
      console.log(index, item);
    })

    // 需求3 去掉 my jQuery 两端的空格
    var str = '  my jQuery  '
    // 2).$.trim() ：去除两端的空格
    // 原生
    console.log('---'+str.trim()+'---');
    // jQuery
    console.log('---' + $.trim(str) + '---');
  </script>
</body>
</html>